<template>
  <div class="position-box">
    <div class="poo">
      <p>全部</p>
    </div>
    <div class="nav">
      <ul>
        <li v-for="(item, index) in position" :key="index">
          <router-link :to="{path:'/List',query:{nextIndex:index}}">
            <!-- <a href="javascript:;" @click="goToNextPage(index)"> -->
            <img :src="item.imgs" alt="" />
            <p>{{ item.title }}</p>
            <!-- </a> -->
          </router-link>
        </li>
      </ul>
    </div>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value" :options="option" class="paixu" />
      <van-dropdown-item title="更多筛选" ref="item">
        <div>
          <van-cell center title="结算方式"> </van-cell>
          <van-cell class="type">
            <button
              v-for="(list, index) in type"
              :key="index"
              :class="{ active: isActive, change: isChange == index }"
              @click="bgchange(index)"
            >
              {{ list }}
            </button>
          </van-cell>
        </div>

        <div>
          <van-cell center title="工作周期"> </van-cell>
          <van-cell class="data">
            <button
              v-for="(list1, index) in data"
              :key="index"
              :class="{ active: isActive, change: isChange == index }"
              @click="bgchange(index)"
            >
              {{ list1 }}
            </button>
          </van-cell>
        </div>
        <div>
          <van-cell center title="性别要求"> </van-cell>
          <van-cell class="type">
            <button
              v-for="(list2, index) in sez"
              :key="index"
              :class="{ active: isActive, change: isChange == index }"
              @click="bgchange(index)"
            >
              {{ list2 }}
            </button>
          </van-cell>
        </div>
        <div class="overbtn" style="padding: 5px 16px">
          <van-button class="btn1" round type="info">重置</van-button>
          <van-button class="btn2" round type="info">确认</van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="main">
      <ul>
        <li v-for="(item,index) in zwxq" :key="item.id">
          <router-link :to="'/Zwxq/' + index">
            <p class="title">{{ item.name }}</p>
            <p class="neirong">
              {{ item.gsname }} <span class="biaoji">{{ item.gzsj }}</span>
              <span class="price">{{ item.money }}</span>
            </p>

            <div class="san">
              <span class="tiaojian">{{ item.gzsj }}</span>
              <span class="tiaojian">{{ item.gzsj }}</span>
              <span class="tiaojian">{{ item.gzsj }}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import axios from 'axios';
export default {
  name: "Position",
  data() {
    return {
      index: [],
      position: [],
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "默认排序", value: 0 },
        { text: "最新发布", value: 1 },
        { text: "报名最多", value: 2 },
        { text: "薪资最高", value: 3 },
      ],
      type: ["不限", "日结", "周结", "月结", "完结结算"],
      data: ["不限", "长期", "短期", "周末"],
      sez: ["不限", "男", "女"],
      isActive: true,
      isChange: false,
      zwxq:[]
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    bgchange(index) {
      this.isChange = index;
    },
    // goToNextPage(index) {
    //   this.$router.push({
    //     path: "/List",
    //     query: {
    //       nextIndex: index,
    //     },
    //   });
    // },
  },
  components: {
    Footer,
  },
  created() {

    axios({
      url: "http://localhost:3000/position",
    }).then((res) => {
      this.position = res.data;
    });

     axios({
      url: "http://localhost:3000/zwxq",
      method: "get",
    }).then((res) => {
      // 直接转换成json对象，并赋值给index
      this.zwxq = res.data;
    });
  },
};
</script>

<style scoped>
.overbtn {
  display: flex;
  justify-content: space-between;
}

.btn1 {
  width: 48%;
  background-color: #b2b2b2;
  border: 0;
}
.btn2 {
  width: 48%;
}
.position-box {
  position: relative;
}
.poo p {
  font-size: 0.24rem;
  padding: 0.2rem 0 0.1rem 0.22rem;
}
.nav {
  margin-bottom: 0.25rem;
}
.nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0.15rem;
}
.nav ul li a {
  display: block;
  display: flex;
  flex-direction: column;
  font-size: 0.12rem;
  color: #b2b2b2;
  text-align: center;
}
.nav ul li a img {
  width: 0.58rem;
  height: 0.55rem;
}
.type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.active {
  padding: 0.03rem 0.1rem;
  border-radius: 0.05rem;
  background-color: #b2b2b2;
  border: 0;
  margin-right: 0.35rem;
  margin-bottom: 0.05rem;
  opacity: 0.5;
  color: #fff;
}
.change {
  padding: 0.03rem 0.1rem;
  border-radius: 0.05rem;
  background-color: #1989fa;
  border: 0;
  margin-right: 0.35rem;
  margin-bottom: 0.05rem;
  opacity: 0.5;
  color: #fff;
}

/* .type button:hover{
  background-color: #1989FA;
} */

.main {
  display: flex;
  flex-direction: column;
  margin-left: 0.1rem;
}

.main ul {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.7rem;
}

.main ul li {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #8e8e8e;
}

.main ul li .title {
  font-size: 0.2rem;
  line-height: 0.4rem;
  margin-top: 0.15rem;
}

.main ul li b {
  font-weight: 600;
}

.main ul li .biaoji {
  color: #bfbfbf;
  font-size: 0.12rem;
  line-height: 0.4rem;
}

.main ul li .san {
  color: #8db7d9;
  line-height: 0.5rem;
}

.main ul li .tiaojian:first-child {
  margin-left: 0;
}

.main ul li .tiaojian {
  margin-left: 0.3rem;
}

.main ul li .price {
  float: right;
  margin-right: 0.1rem;
}
</style>

